<template>
    <div>
        <p>actions-user: {{User.user}}</p>
        <br>
        <p>actions-name: {{User.name}}</p>
        <br>
        <!-- getters中的属性也可以直接使用 -->
        <p>getters: {{User.newName}}</p>
        <button @click="change">change</button>
        <hr>
        <button @click="reset">reset</button>
    </div>
</template>

<script setup lang="ts">
import { useUserStore } from '../../store/user'

const User = useUserStore()

// pinia实例上的api: $subscribe   监听此实例上state里的值，一有改变就会调用这个api
User.$subscribe((args, state) => {
    console.log('==>', args);         // 这里有event, storeId
    console.log('==>', state);
}, {                            // 第二个参数
    detached: true,                // 这个也是表示：组件销毁了如果还需要监听这个 state 就设置为true
    deep: true,                 //这个跟watch差不多
    flush: 'post'              //这个跟watch差不多
}) 

// 监听actions里的事件， 一被调用就执行这个api, 这个工厂函数里只有一个参数
User.$onAction((args) => {
    console.log('==>', args);

    args.after(() => {          // 这个方法是最后执行的
        console.log('after');
    })
}, true)     // 这第二个参数的意思是：当这个组件销毁了，如果还要监听actions，就可以设置为true开启

const change = () => {
    User.setUser()                   // 同步
}

const reset = () => {
    User.$reset()          // pinia实例上的api: $reset 恢复上一次的值
}
</script>

<style scoped>

</style>